<template>
  <div>
      <div class="t" style="padding-left: 15px;">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <div class="yi">
            <el-form-item size="mini" label="开始时间" class="a">
              <el-date-picker  v-model="form.startTime" type="datetime"  class="styleClass" placeholder="选择开始时间" value-format="yyyyMMdd HH:mm:ss" style="width:100%"></el-date-picker>
            </el-form-item>
            <el-form-item size="mini" label="结束时间" class="a">
              <el-date-picker  v-model="form.endTime" type="datetime"  class="styleClass" placeholder="选择结束时间" value-format="yyyyMMdd HH:mm:ss" style="width:100%"></el-date-picker>
            </el-form-item>
            <el-button size="mini" class="newButtonColor SearchBTN" @click="query">查询</el-button>
            <el-button size="mini" class="otherBTN SearchBTN" @click="clearForm">清空</el-button>
          </div>
        </el-form>
        <div id="allmap" ref="allmap"></div>
      </div>
  </div>
</template>

<script>
  import { selectOrder } from "./order";
  import imgUrl from "../../../static/img/tb.png"
  export default {
    name: 'App',
    data() {
      return {
        form: {},
        tbUrl:imgUrl,
        baiduUrl: "",
        points : "",
        mapObj:{},
        heatmapOverlay:{},
        myIcon:{},
        marker:{},
        content:"",
        opts:{},
        point:{},
        infoWindow:{}
      }
    },
    methods: {
      map() {
        this.mapObj = new window.BMap.Map(this.$refs.allmap) // 创建Map实例
        this.mapObj.centerAndZoom(new window.BMap.Point(118.778074408, 32.0572355018), 12) // 初始化地图,设置中心点坐标和地图级别
        this.mapObj.addControl(new window.BMap.MapTypeControl({ // 添加地图类型控件
          mapTypes: [
            window.BMAP_NORMAL_MAP,
            window.BMAP_HYBRID_MAP
          ]
        }))
        this.mapObj.setCurrentCity('南京') // 设置地图显示的城市 此项是必须设置的
        this.mapObj.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
        this.heatmapOverlay = new window.BMapLib.HeatmapOverlay({
          "radius": 30, "opacity":0
        });
        this.mapObj.addOverlay(this.heatmapOverlay);
        this.getData();
      },
      query() {

        return new Promise((resolve, reject) => {
          selectOrder(this.form).then(res => {
            this.points = res;
            this.heatmapOverlay.setDataSet({
              data: this.points,
              max: 10000
            });
            this.addHeatMapClick(this.points);
          });
        });
      },
      getData() {
        return new Promise((resolve, reject) => {
          selectOrder().then(res => {
            this.points = res;
            this.heatmapOverlay.setDataSet({
              data: this.points,
              max: 10000
            });
            this.addHeatMapClick(this.points);
          });
        });
      },
      addHeatMapClick(points){
        	for(var i=0;i<points.length;i++){
            this.myIcon = new BMap.Icon("../../../static/img/tb.png", new BMap.Size(23, 25));
        		this.marker = new window.BMap.Marker(new window.BMap.Point(parseFloat(points[i].lng),parseFloat(points[i].lat)),{icon:this.myIcon});  // 创建标注
        		// this.content = "开始时间："+points[i].startTime+"</br>结束时间："+points[i].endTime+"</br>运营公司："+points[i].company+"</br>呼叫订单数:"+ points[i].count;
            this.content = "<div class = 'titsle'>详细信息</div><ul class='con'><li><span class='startIcon'></span><span class='tit'>开始时间：</span>"+points[i].startTime+"</li><li><span class='endIcon'></span><span class='tit'>结束时间：</span>"+points[i].endTime+"</li><li><span class = 'companyIcon'></span><span class='tit'>运营公司：</span>"+points[i].company+"</li><li><span class='numIcon'></span><span class='tit'>呼叫订单数：</span>"+ points[i].count+"</li></ul>"
        		this.mapObj.addOverlay(this.marker);               // 将标注添加到地图中
        		this.addClickHandler(this.content,this.marker,this.mapObj);
         }
      },
      addClickHandler(content,marker,mapObj){
      		marker.addEventListener("click",function(e){
            var p = e.target;
            this.opts = {
            			width : 250,     // 信息窗口宽度
            			height: 140,     // 信息窗口高度
            			// title : "<b>详细信息1</b>" , // 信息窗口标题
            			enableMessage:true//设置允许信息窗发送短息
            		   };
            var html = "<div>"+content+"</div>"
            this.point = new window.BMap.Point(p.getPosition().lng,p.getPosition().lat);
            this.infoWindow = new window.BMap.InfoWindow(html,this.opts);  // 创建信息窗口对象
            mapObj.openInfoWindow(this.infoWindow,this.point); //开启信息窗口

            }
      		);
      	},
        clearForm() {
          this.form = {};
        }
    },
    mounted() {
      this.$refs.allmap.style.height = document.body.clientHeight+"px";
      this.map();
    }
  }
</script>
<style>
 ul,li{
   margin: 0;
   padding: 0;
   list-style: none;
 }
 .con{
   color: #333333;
 }
 .con li{
   margin-bottom: 5px;
   display: flex;
   align-items: center;
 }
 .titsle{
   font-weight: 600;
   color: #159F5C;
   padding-bottom: 6px;
   margin-bottom: 6px;
   border-bottom: 2px solid #159F5C;
 }
 .startIcon{
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 5px;
   background: url(startTime.png) no-repeat center center/cover;
 }
 .endIcon{
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 5px;
   background: url(endTime.png) no-repeat center center/cover;
 }
 .companyIcon{
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 5px;
   background: url(company.png) no-repeat center center/cover;
 }
 .numIcon{
   display: inline-block;
   width: 12px;
   height: 12px;
   margin-right: 5px;
   background: url(listNum.png) no-repeat center center/cover;
 }
 .tit{
   color: #bdb3b3;
 }
  #allmap {
    width: 100%;
    overflow: hidden;
  }
</style>
